<template>
  <LayoutContent>
    <div class="button">
      <el-button type="primary" size="small" @click="handleClick('add')">新增教师</el-button>
      <!-- <el-button type="primary" size="small" @click="handleClick('batchAdd')">导入excel</el-button> -->
      <BasicExcel action="/api/excel/teacher" />
    </div>
    <!-- 搜索条件 -->
    <div class="form">
      <el-form :inline="true" :model="form">
        <el-form-item label="姓名:">
          <el-input v-model="form.name" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="性别:">
          <el-select v-model="form.gender" placeholder="请选择">
            <el-option label="男" value="1" />
            <el-option label="女" value="0" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="年龄:">
          <el-input v-model="form.age" placeholder="请输入" clearable />
        </el-form-item> -->
        <el-form-item label="手机号码:">
          <el-input v-model="form.phone" placeholder="请输入" clearable />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" size="small" @click="handleClick('select')">搜索</el-button>
          <el-button type="primary" size="small" @click="handleClick('rest')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格 -->
    <BasicTable :columns="columns" :border="true" :tableData="tableData" :page="page" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange">
      <template #gender="{ row }">
        {{ row.gender ? '男' : '女' }}
      </template>
      <template #operation="{ row }">
        <el-button link type="primary" size="small" @click="handleClick('detail', row.id)">详情</el-button>
        <el-button link type="primary" size="small" @click="handleClick('update', row.id)">修改</el-button>
        <el-button link type="primary" size="small" @click="handleClick('delete', row.id)">删除</el-button>
      </template>
    </BasicTable>
  </LayoutContent>
</template>

<script setup>
import { getListApi, deleteApi, addApi } from '@/api/teacher/index'
import { ref, onMounted, inject } from 'vue'
import AddDialog from './addDialog.vue'
import { useRouter } from 'vue-router'

const identity = inject('identity')

// 搜索条件
const form = ref({
  name: '',
  gender: '',
  age: '',
  phone: '',
})

// 表格
const tableData = ref([])
const columns = [
  {
    prop: 'index',
    label: '序号',
  },
  {
    prop: 'name',
    label: '姓名',
  },
  {
    prop: 'gender',
    label: '性别',
  },
  {
    prop: 'age',
    label: '年龄',
    sort: true,
  },
  {
    prop: 'phone',
    label: '手机号',
  },
  {
    prop: 'email',
    label: '邮箱',
  },
  {
    prop: 'createTime',
    sort: true,
    label: '创建时间',
  },
  {
    prop: 'updateTime',
    sort: true,
    label: '更新时间',
  },
  {
    prop: 'operation',
    label: '操作',
    width: 200,
  },
]
const page = ref({
  currentPage: 1,
  pageSize: 10,
  total: 10,
})
const getList = async () => {
  const res = await getListApi({ ...page.value, ...form.value, identity })
  if (res.code == 200) {
    tableData.value = res.data.records
    page.value.total = res.data.total
  } else {
    ElMessage.error(res.msg)
  }
}
onMounted(() => {
  getList()
})
const handleCurrentChange = (value) => {
  page.value.currentPage = value
  getList()
}
const handleSizeChange = (value) => {
  page.value.pageSize = value
  getList()
}

const router = useRouter()
const handleClick = (type, id) => {
  switch (type) {
    case 'delete':
      deleteData(id)
      break
    case 'detail':
      router.push({ path: '/teacher/detail', query: { id, type } })

      break
    case 'select':
      selectData()
      break
    case 'add':
      router.push({ path: '/teacher/add', query: { type } })
    case 'update':
      router.push({ path: '/teacher/add', query: { id, type } })
      break
    case 'rest':
      restForm()
      break
  }
}
const selectData = () => {
  getList()
}
// 删除
const deleteData = async (id) => {
  const res = await deleteApi({ id })
  if (res.code == 200) {
    getList()
    ElMessage.success(res.msg)
  } else {
    ElMessage.error(res.msg)
  }
}

// 新增和修改
const submit = async (data) => {
  const res = await addApi(data)
  if (res.code == 200) {
    getList()
    ElMessage.success(res.msg)
  } else {
    ElMessage.error(res.msg)
  }
}

// 重置
const restForm = () => {
  form.value = {}
  page.value = { currentPage: 1, pageSize: 10 }
  getList()
}
</script>

<style scoped lang="scss">
.card {
  height: 100%;
  .button {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
  }
}
:deep(.el-form-item__content) {
  min-width: 200px;
}
</style>
